<template>
    <div id="search-view">
        <div class="input-box">
            <a-input-search class="input-search" v-model:value="value" placeholder="搜索用户名/昵称/uid" enter-button
                @search="onSearch" />
        </div>
        <ul class="user-list">
            <li v-for="(uid, index) in usersList" :key="index">
                <userInfoItem :uid="uid" />
            </li>
        </ul>
    </div>
</template>

<script setup>
    import { ref, onMounted } from 'vue'
    import { debounce } from '@/utils/index.js'
    import { searchUsers } from '@/api/user'
    import userInfoItem from '@/components/userInfoItem.vue'
    import { useLoginUserStore } from '@/store/useLoginUserStore'
    import router from '@/router'
    const loginUserStore = useLoginUserStore()
    const value = ref('')
    const usersList = ref([])

    const onSearch = debounce(async searchValue => {
        searchValue = searchValue.trim()
        if (!searchValue) return
        console.log('searchValue:', searchValue)
        const res = await searchUsers({ keyword: searchValue })
        if (res.data.code === 0) {
            usersList.value = res.data.data.users
            console.log(usersList.value)
        } else {
            alert(res.data.msg)
        }
    }, 300)
    onMounted(() => {
        setTimeout(() => {
            if (!loginUserStore.loginStatus) {
                router.push({
                    path: '/login/log'
                })
            }
        }, 1000)

    })
</script>

<style lang="less" scoped>
    #search-view {
        .input-box {
            width: 100%;
            display: flex;
            justify-content: center;
            padding: 50px 0 0 0;


            .input-search {
                width: 50%;

                ::v-deep input:focus,
                ::v-deep input:hover {
                    border-color: rgb(96, 64, 164);
                }

                ::v-deep button {
                    background-color: rgb(96, 64, 164);
                }
            }


        }

        .user-list {
            background-color: rgba(255, 255, 255, 0.715);
            margin: 20px auto;
            width: 60%;
            padding: 0;

            li {
                list-style: none;
                padding: 10px;
                border: 1px solid #999;
                width: 100%;
            }
        }
    }
</style>